<template>
	<n-page>
		<view slot="navbar"></view>
		<view slot="header">
			<view class="fixed" style="width: 100%;z-index: 9;">
				<view class="bg-gray-1">
					<view class="flex-row justify-between bg-red-7 padding-sm">
						<view class="padding-sm">
							<view class="color-gray-1 text-xl">红包</view>
							<view class="color-gray-1 text-xl">{{ memberInfo.balance_money ? parseFloat(memberInfo.balance_money) : 0 }}</view>
						</view>
						<view class="padding-sm text-right">
							<n-button text="转入" color="$gray-9" background="$gray-2" size="24" @click="toBalance" width="100" height="50"></n-button>
							<n-button class="margin-top-sm" text="转出" color="$gray-9" background="$gray-2" size="24" @click="balanceTo" width="100" height="50"></n-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view slot="body">
			<view class="bg-gray-1 padding-y-sm border-bottom-xs border-solid border-gray-4" style="margin-top: 210rpx;border: 0;">
				<view class="flex-row items-center padding-x-sm">
					<n-icon name="roundmenufill" color="$orange-6" size="30"></n-icon>
					<text class="margin-left-xs">红包明细</text>
				</view>
			<!-- 	<view>
					<text class="cuIcon- text-df" @tap.stop="togglePopup('bottom', 'filtertype')">&#xe626;111</text>
					<text class="cuIcon- text-xs padding-lr-xs">︱</text>
					<text class="cuIcon- text-df padding-right-sm" @tap.stop="open">&#xe76b; 时间筛选</text>
				</view> -->
			</view>
						
			<z-paging ref="paging" @query="getData" :list.sync="dataList" :enable-back-to-top="true">				
				<view class="bg-gray-1">
					<view class="padding-x-md border-bottom-xs border-dotted border-gray-5" style="border-top-width:0;border-left-width:0;border-right-width:0" v-for="(item, index) in dataList" :key="index">
						<view class="flex-row items-center padding-y-xs">
							<view class="margin-right-md">
								<n-image v-if="item.account_data>0" width="70" height="70" :src="$util.img('upload/uniapp/member/balance_detail/pay.png')" mode="widthFix"></n-image>
								<n-image v-else width="70" height="70" :src="$util.img('upload/uniapp/member/balance_detail/income.png')" mode="widthFix"></n-image>
							</view>
							<view class="flex-column flex-1">
								<view class="flex-row justify-between">
									<view class="text-md text-bold">{{ item.type_name }}</view>
									<view class="text-md color-red-6" v-if="item.account_data > 0">
										+{{ parseFloat(item.account_data) }}
									</view>
									<view class="text-lg color-gray-8" v-else>{{ parseFloat(item.account_data) }}</view>
								</view>
								<view class="text-xs color-gray-7">
									<text>{{ $util.timeStampTurnTime(item.create_time) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>	
			</z-paging>
		</view>
	</n-page>
</template>
 

 <script>
 import globalConfig from '@/common/js/golbalConfig.js'
 export default {
 	data() {
 		return {
			memberInfo: {
				balance: 0,
				locked_balance: 0,
				balance_money: 0,
				point: 0,
				red_point: 0,
				junzheng_ticket: 0
			
			},
 			memberAccount: {
 				point: 1,
 			},
 			dataList: []
 		};
 	},
 	mixins:[globalConfig],
 	onShow() {
 		this.$langConfig.refresh();
 		if (!uni.getStorageSync('token')) {
 			this.$util.redirectTo(
 				'/pages/login/login/login',
 				{
 					back: '/otherpages/member/balance_money/balance_money'
 				},
 				'redirectTo'
 			);
 		}
 		this.getMemberInfo()
 	},
 	methods: {
		// 转入
 		toBalance(){
 			this.$util.redirectTo('/otherpages/member/balance_money_to/balance_to/balance_to');
 		},
		// 转出
 		balanceTo(){
 			this.$util.redirectTo('/otherpages/member/balance_money_to/to_balance/to_balance');
 		},
 		//获取个人积分信息
 		getAccountInfo() {
 			this.$api.sendRequest({
 				url: '/api/memberaccount/info',
 				data: {
 					account_type: 'balance_money'
 				},
 				success: res => {
 					if (res.code == 0 && res.data) {
 						this.memberAccount = res.data;
 					} else {
 						this.$util.showToast({ title: res.message });
 					}
 				}
 			});
 		},
 		//获得列表数据
		getData(pageNo, pageSize) {
			this.$api.sendRequest({
				url: '/api/memberaccount/page',
				data: {
					page_size: pageSize,
					page: pageNo,
					account_type: 'balance_money'
				},
				success: res => {
					let newArr = [];
					let msg = res.message;
					if (res.code == 0 && res.data) {
						newArr = res.data.list;
					} else {
						this.$util.showToast({ title: msg });
					}
					this.$refs.paging.complete(newArr);
				},
				fail: res => {
					this.$refs.paging.complete(false);
				}
			});
		},
		
		// 获取会员基础信息
		async getMemberInfo() {
			let res = await this.$api.sendRequest({
				url: '/api/member/info',
				async: false
			});
			if (res.code >= 0 && res.data) {
				console.log(this.memberInfo.balance_money);
				this.token = uni.getStorageSync('token');
				this.memberInfo = res.data;
				// balance:res.data.balance
				uni.setStorageSync('userInfo', this.memberInfo);
			} else {
				this.token = '';
				this.initInfo();
				uni.removeStorageSync('token');
			}
			uni.stopPullDownRefresh();
		},
	}
 };
 </script>

 <style lang="scss">
 /deep/ .fixed{position: relative;top:0}
 .cart-empty{position:relative;top: 50%;margin-top: 104px !important;}
 .account-box {
 	width: 702rpx;
 	height: 211rpx;
 	margin: 0 auto;
 	border-radius: 20rpx;
 	padding: 20rpx;
 	box-sizing: border-box;

 	.accout-btn {
 		display: flex;
 		margin-top: 30rpx;
 		view {
 			width: 170rpx;
 			height: 44rpx;
 			border-radius: 22rpx;
 			border: 1px solid rgba(255,255,255,.4);
 			color: #fff;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			margin-right: 44rpx;
 		}
 	}

 	.account-text {
 		color: #fff;
 		font-size: 44rpx;
 		display: flex;
 		align-items: center;
 		margin-left: 10rpx;
 		text {
 			margin-right: 12rpx;
 		}
 	}
 }

 .detailed-wrap {
 	background: #fff;
 	border-radius: 10rpx;
 	margin: 20rpx;
 	.head {
 		display: flex;
 		height: 90rpx;

 		& > view {
 			flex: 1;
 			text-align: left;
 			padding: 0 $ns-padding;
 			line-height: 90rpx;
 		}
 	}

 	.cont {
 		background: #fff;
 		width: 702rpx;
 		margin: 0 auto;

 		.detailed-item {
 			padding: 32rpx $ns-padding;
 			margin: 0 $ns-margin;
 			border-bottom: 1px solid #eee;
 			position: relative;
 			box-sizing: border-box;

 			&:last-of-type {
 				border-bottom: none;
 			}

 			.info {
 				padding-right: 180rpx;

 				.event {
 					font-weight: bold;
 					font-size: $ns-font-size-lg;
 					line-height: 1.3;
 					color: #333;
 				}
 				.time-box{
 					line-height: 1;
 					margin-top: 24rpx;
 				}

 				.time {
 					font-size: $ns-font-size-base;
 					color: $ns-text-color-gray;
 				}
 			}

 			.num {
 				width: 160rpx;
 				position: absolute;
 				right: 17rpx;
 				top: 50%;
 				transform: translateY(-50%);
 				text-align: right;
 				font-size: 40rpx;
 			}
 		}
 	}
 }
 </style>
